<template>
	<div class="userCenter">
		<van-nav-bar title="个人中心" left-text="返回" left-arrow @click-left="onClickLeft" />
		<div class="list-box">
			<div class="list-item box-border  f-row jc-sb ai-c" @click="jumpPages(i.url, i.id)" v-for="i in list" :key="i.id">
				<div class="f-row ai-c">
					<text>
						{{ i.title }}
					</text>
				</div>
				<div class="right">
					<van-icon name="arrow" color="#B6B6B6"/>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const list = [{
	id: 1,
	title: '个人信息',
	iconUrl: '/static/icon/my/5.png',
	url: '/alterUser'
}, {
	id: 2,
	title: '修改密码',
	iconUrl: '/static/icon/my/2.png',
	// url: `/my_pages/cardLIst/cardLIst`,
	url: `/alterPassWord`,
},
]
// 返回按钮
const onClickLeft = () => {
	router.back();
};
//点击跳转
const jumpPages = (url)=>{
	router.push({
    path: url,
  })
}
</script>
<style lang="scss" scoped>
::v-deep .van-nav-bar__text,
::v-deep .van-icon {
	color: #000 !important;
}

.userCenter {
	.tabs {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;

	}

	.list-box {
		z-index: 999;
		// border-radius: 40px 40px 0 0;
		padding: 20px;
		margin-top: 0;
		background: #fff;
		position: relative;
		top: 10px;
	}

	.right {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.je {
		margin-right: 20px;
		color: #081738;
	}

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #ECECEC;
		padding: 15px 0;
	}

	.list-item:last-child {
		border: none;
	}

	text {
		color: #4D4D4D;
		font-size: 14px
	}

	.icon {
		width: 30px;
		height: 30px;
		margin-right: 20px;
	}
}
</style>